<template>
  <div>
    <a-form :form="form" @submit="handleSubmit">
      <a-form-item label="标题" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
        <ant-input-search
          :options="options"
          :Show="Show"
          @ChangeDown="ChangeDown"
          :InputSearch="InputSearch"
        />
      </a-form-item>
      <a-form-item label="卡片标题" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
        <ant-input-search
          :options="optionsTwo"
          :Show="ShowTwo"
          @ChangeDown="ChangeDownTwo"
          :InputSearch="InputSearchTwo"
        />
      </a-form-item>
      <a-form-item label="是否有边框" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
        <a-radio-group v-decorator="['bordered']">
          <a-radio value="1">是</a-radio>
          <a-radio value="0">否</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="鼠标移过时可浮起" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
        <a-radio-group v-decorator="['hoverable']">
          <a-radio value="1">是</a-radio>
          <a-radio value="0">否</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 18, offset: 5 }">
        <a-button type="primary" html-type="submit">创建</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Emit } from "vue-property-decorator";
@Component({
  name: "card-setting",
  layout: "menu"
})
export default class CardSetting extends Vue {
  form: any = {};
  options: object = {
    zh: "",
    mn: "",
    en: ""
  };
  optionsTwo: object = {
    zh: "",
    mn: "",
    en: ""
  };
  InputSearch: string = "";
  InputSearchTwo: string = "";
  Show: boolean = false;
  ShowTwo: boolean = false;
  created() {
    const _this: any = this;
    this.form = _this.$form.createForm(this);
    setTimeout(() => {
      this.form.setFieldsValue({
        ["bordered"]: "1",
        ["hoverable"]: "1",
      });
    }, 0);
  }
  handleSubmit(e: any) {
    e.preventDefault();
    this.form.validateFields((err, values) => {
      if (!err) {
        values.options = this.options;
        values.optionsTwo = this.optionsTwo;
        console.log("Received values of form: ", values);
        // this.Submit(values);
      }
    });
  }
  ChangeDown(n: object) {
    this.options = n;
    this.InputSearch = JSON.stringify(n);
    this.Show = !this.Show;
  }
  ChangeDownTwo(n: object) {
    this.optionsTwo = n;
    this.InputSearchTwo = JSON.stringify(n);
    this.ShowTwo = !this.ShowTwo;
  }

  @Emit("Submit")
  Submit(n: object) {}
}
</script>